<template>
  <div>
    <el-dialog
      title="归还体育用品"
      :visible.sync="show"
      :before-close="closeDialog"
      :close-on-click-modal="true"
      width="600px"
      custom-class="dialog-dliveryDetail user-dialog-css"
      center
    >
      <div v-loading="loading" element-loading-text="系统正在计算，请稍等">
        <template v-if="alreadyReturned">
          <el-result v-if="priceSum > 0" icon="error" :title="`归还失败，还需缴纳 ${priceSum} 元`" sub-title="由于逾期或者物品缺少等原因，您需要缴纳以上费用">
            <template slot="extra">
              <el-button type="primary" size="medium" @click="afterSubmit">返回</el-button>
            </template>
          </el-result>
          <el-result v-else icon="success" title="归还成功" sub-title="您的归还已经登记，请前往仓库入库">
            <template slot="extra">
              <el-button type="primary" size="medium" @click="afterSubmit">返回</el-button>
            </template>
          </el-result>
        </template>
        <template v-else>
          <h4>请确认归还数量，如有遗失损坏，请如实修改归还数量。</h4>
          <p>
            创建时间：<span>{{ data._createTime }}</span> 逾期时间：<span>{{ data._expiryTime }}</span>
          </p>
          <el-form ref="form" :inline="true" :model="form" label-position="left" label-width="80px">
            <el-form-item
              v-for="(item, index) in form.equipList"
              :key="item.id"
              :label="item.equipName"
              :prop="`equipList[${index}].count`"
              :rules="[{ required: true, message: '请输入归还数量', trigger: 'blur' }]"
            >
              <el-input-number v-model="item.count" size="small" :min="0" :max="data.equipList[index].count" />
            </el-form-item>
          </el-form>
        </template>
      </div>

      <span v-if="!alreadyReturned" slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { returns } from '@/api/returns'
export default {
  name: 'ReturnsDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: {},
      loading: false,
      alreadyReturned: false,
      priceSum: 0
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.form = {
          userId: JSON.parse(this.$store.state.user.account).id,
          borrowId: this.data.id,
          createTime: this.data.createTime,
          equipList: JSON.parse(JSON.stringify(this.data.equipList))
        }
        this.alreadyReturned = false
        this.priceSum = 0
      }
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true
          let result = await returns.put(this.form).catch((e) => {
            if (e.code === 400) return e
            return null
          })
          if (result === null) {
            return
          }
          this.loading = false
          this.alreadyReturned = true
          this.priceSum = result.data.priceSum
        } else {
          return false
        }
      })
    },
    afterSubmit() {
      this.$emit('afterSubmit')
    },
    closeDialog() {
      this.$emit('closeDialog')
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner {
    color: #606266;
    background-color: #fff;
}
::v-deep .el-dialog--center .el-dialog__body {
    padding: 0 60px 25px;
}
.info-text {
    font-size: 16px;
    font-weight: 500;
}
</style>
